(function () {

    function region() {
        var h1 = document.querySelector("h1");
        var tbody=document.querySelector('tbody')
        console.log(tbody)
        var provinceSelect = document.querySelector("#province");
        if (!provinceSelect) {
            return;
        }
        var citySelect = document.querySelector("#city");
        function getProvinces() {
            ajax({
                url: "api/province",
                success: function (data) {
                    console.log(data);
                    data.forEach(item => {
                        var option = `<option value="${item.code}">${item.name}</option>`;

                        provinceSelect.insertAdjacentHTML("beforeend", option);
                    })
                }
            })
        }

        getProvinces();


        function changeProvince() {
            provinceSelect.addEventListener("change", function (e) {
                console.log(e.target.value);
                var code = e.target.value;

                ajax({
                    url: "api/city",
                    data: {
                        code
                    },
                    success: function (data) {
                        citySelect.innerHTML = `<option value="-1" selected>请选择城市</option>`
                        data.forEach(item => {
                            var option = `<option value="${item.code}">${item.name}</option>`;
                            citySelect.insertAdjacentHTML("beforeend", option);
                            var pname = e.target.querySelector(`[value="${code}"]`).innerText;
                            console.log(pname);
                        })
                    }
                })
                // h1.innerHTML = provinceSelect.options[provinceSelect.options.selectedIndex].innerText
                
            })

        }
        changeProvince();


        function changecity() {
            citySelect.addEventListener("change", function (e) {

                h1.innerHTML = citySelect.options[citySelect.options.selectedIndex].innerText + "未来七日天气预报";

                var province1 = provinceSelect.options[provinceSelect.options.selectedIndex].innerText
                // 获取集合，再获取点击的那个下标，再获取文本
                var city1 = citySelect.options[citySelect.options.selectedIndex].innerText
                // console.log(citySelect.options);
                // console.log(citySelect.options.selectedIndex);
                // console.log(citySelect.options[citySelect.options.selectedIndex]);
                // var pname = (`[value="${code}"]`).innerText;
                // console.log(pname);
        
                // var h1 = document.querySelector("h1");
                // h1.innerHTML = `${citySelect.options[citySelect.options.selectedIndex].innerText}未来七日天气预报`
                console.log(province1)
                console.log(city1);
                weather(province1,city1);
            })
        }
        changecity()

        ajax({
            url: 'http://127.0.0.1:3000/proxy/weather/common',
            data: {
                source:'pc',                           
                weather_type:'forecast_24h', 
                province: "北京市",
                city: "北京市",
              
            },
            success: function(data) {
                console.log(data);
                xuanran(Object.values(data.data.forecast_24h));
            }
        })

        function weather(province,city){
            ajax({
                url: 'http://127.0.0.1:3000/proxy/weather/common',
                data: {
                    source:'pc',                           
                    weather_type:'forecast_24h', 
                    province: province,
                    city: city
                },
                success: function(data) {
                    console.log(data)
                    console.log("data.data.forecast_24h",data.data.forecast_24h);
                    console.log('result',Object.values(data.data.forecast_24h))
                    xuanran(Object.values(data.data.forecast_24h));
                }
            })
        }

        
        function xuanran(data){
            // [{nu:value},{},{}]
            var str='';
            data.forEach(item=>{
                var str1=`<tr><td>${item.time}</td>
                <td>${item.max_degree}</td>
                <td>${item.day_weather}</td>
                <td>${item.day_wind_power}</td>
                <td>${item.day_wind_direction}</td><tr>`
                str+=str1;

                console.log("str1",str1);
            })
            tbody.innerHTML=str;
        }
        
    }

    region();
})();